<template>
  <div class="input-wrap error">
    <input v-show="!show" class="input password" v-model="initValue" @input="handleInput" type="password">
    <input v-show="show" class="input text" v-model="initValue" @input="handleInput" type="text">
    <div class="icon-group">
      <div v-show="!show" @click="show = true" class="icon iconfont icon-xianshiyincang-1"></div>
      <div v-show="show" @click="show = false" class="icon iconfont icon-xianshiyincang-"></div>
    </div>
    <div ref="oError" class="error-text">错误提示信息</div>
  </div>
</template>

<script>
import { ref, watchEffect } from 'vue';

export default {
  props: {
    modelValue: { type: String, default: '' },
    prop: { type: String, default: '' }
  },
  emits: ['update:modelValue', 'input'],
  setup(props, ctx) {
    const initValue = ref(props.modelValue);

    const handleInput = () => {
      emit('update:modelValue', initValue.value);
      emit('input', initValue.value);
    }

    //  控制 密码的显示
    const show = ref(false);

    return {
      initValue,
      handleInput,
      show
    }
  }
}

</script>

<style lang="scss" scoped>
.input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  padding: 1rem;
  border: .1rem solid #aaa;
  border-radius: 1rem;

  &.error {
    border: .1rem solid red;
  }

  .input {
    flex: 1;
  }

  .icon-group {
    .icon {
      margin-left: 1rem;
      font-size: 2rem;
    }
  }

  .error-text {
    position: absolute;
    left: 1rem;
    bottom: -2.2rem;
    font-size: 1.4rem;
    color: red;
  }
}
</style>